import React from 'react';
import {messages} from "share/common";
import 'styles/enterprise-manage/person-manage/person-detail/person-detail-components/bank-card.scss';
import PDService from 'containers/enterprise-manage/person-manage/person-detail/person-detail.service';
import { message, Icon, Form } from 'antd';
import SlideFrame from  'components/slide-frame'
import NewAlipayCard from './new-alipay-card';
import enableStatus from "images/personal-setting/status-enable.png";

class AlipayCard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      data: [],
      showCreatModel: false,//弹窗是否显示
      card: {},//当前编辑或新增的银行卡
      cardTypeList: [],//银行卡类型的数组
    }
  }

  componentDidMount() {
    this.setState({card: this.props.cardInfo});
  }

  componentWillReceiveProps(nextProps) {
    this.setState({card: nextProps.cardInfo});
  }

  //显示添加银行卡slideFrame
  showAddCardModel = () => {
    if(this.props.isReadOnly)return
    let { card } = this.state;
    Object.assign(card, {
      bankAccountNo: null,
      bankAccountName: null,
      uid: null,
      isPrimary: false,
      enable: true,
    });
    this.setState({
      showCreatModel: true,
      card,//当前编辑或新增的银行卡
    }, ()=> {
      this.openSlideFrame(messages('basic-5.key363')/*新增支付宝信息*/);
    })

  };
  // 编辑银行卡
  editCard = (e, record) => {
    this.openSlideFrame(messages('basic-5.key364')/*编辑支付宝信息*/);
    this.setState({
      showCreatModel: true,
    })
  };
  cancelCard = () => {
    const {createCardOver} = this.props;
    createCardOver && createCardOver();
  };

  openSlideFrame = (title) => {
    const { card, cardTypeList } = this.state;
    SlideFrame.open({
      title: title,
      content: NewAlipayCard,
      afterClose: this.cancelCard,
      params: {card, cardTypeList},
    }, this)
  };

  deleteCard= (e, card) => {
    card.delLoading = true;
    this.setState({
      card
    });
    PDService.deleteCard(card.contactBankAccountOID)
      .then((res) => {
        message.success(messages('common.delete.successful')/*删除成功*/);
        this.props.createCardOver();
      })
      .catch((err) => {
        card.delLoading = false;
        this.setState({
          card
        });
      })
  };

  renderCard(card) {
    const isReadOnly= this.props.isReadOnly;
    let {isShowEditBtn, isShowDelBtn, isEmpty} = this.props;
    if (isEmpty) {
      return (
        <div className={`card-add ${isReadOnly?'readonly':''} ali-pay-card-bg`}>
          <div className="card-add-icon-wrap" onClick={this.showAddCardModel}>
            <Icon type="plus" className="add-icon"/>
          </div>
        </div>
      )
    } else {
      let cardName = 'card';
      if (!card.enable) {
        cardName = 'disabled-card';
      } else if (card.closed) {
        cardName = 'disabled-card';
      }
      return (
        <div className={`${cardName} ali-pay-card-bg`}>
          <div className="card-top">
            <div className="f-left user-name">
              {card.bankAccountName}
            </div>
            <div className="f-right">
              {
                (isShowEditBtn && !card.closed) &&
                <span onClick={this.editCard} className="bank-edit right-gap">
                  <Icon type="edit" className="info-circle-edit"/>
                </span>
              }
              {
                (isShowDelBtn && !card.closed) &&
                (card.delLoading ? <span className="left-gap"><Icon type='loading'/></span> :
                  <span onClick={(e) => this.deleteCard(e, card)} className="bank-edit">
                  <Icon type="delete" className="info-circle-delete"/>
                </span>)
              }
            </div>
            <div className="clear"/>
          </div>
          <div className="clear"/>
          <div className="card-number">
            {card.originalBankAccountNo}
          </div>

          <div className="card-middle1">
            <div className="f-left bank-title">
              UID：
            </div>
            <div className="f-left bank-title-text">{card.uid}</div>
            <div className="clear"/>
          </div>
          <div className="card-bottom inline-top-gap">
            <div>
              {card.isPrimary ?
                <span className="is-default right-gap">
                  {messages('basic-5.key365')/*默认*/}
                </span> : null
              }
              <span className="status">
                {
                  card.closed ? messages('basic-5.key366')/*已注销*/ :
                    (card.enable ? <span><img src={enableStatus} className='enable-status-img'/>{messages('basic-5.key367')/*启用中*/}</span>
                      : messages('basic-5.key368')/*未启用*/)
                }
              </span>
            </div>
            <div className="clear"/>
          </div>
        </div>
      )
    }
  }

  render() {
    const { card } = this.state;
    return (
      <div className="person-bank-card-wrap">
        {this.renderCard(card)}
      </div>
    )
  }
}

AlipayCard.contextTypes = {
  router: React.PropTypes.object
};
AlipayCard.propTypes = {
  createCardOver: React.PropTypes.func,//创建银行卡后
  cardInfo: React.PropTypes.object,//银行卡对象
  isEmpty: React.PropTypes.bool,// 是否是空的
  disabled: React.PropTypes.bool,// 是否是启用的
  isShowEditBtn: React.PropTypes.bool,// 是否显示编辑按钮
  isShowDelBtn: React.PropTypes.bool,// 是否显示删除按钮
  isReadOnly:  React.PropTypes.bool,// 是否是只读
};
AlipayCard.defaultProps = {
  isShowEditBtn: true,
  isShowDelBtn: true,
  isEmpty: false,
};
export default AlipayCard;
